---
title: Platform Based Styles | gluestack-style
description: Writing platform based styles in gluestack-style. This allows you to easily create styles that are specific to a particular platform that is, Web, iOS, or Android.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="styled/api/Platform Based Styles" />

import { styled, StyledProvider } from '@gluestack-style/react';
import { Pressable } from 'react-native';
import { Button, AppProvider, CodePreview } from '@gluestack/design-system';
import { config } from './config';

# Platform Based Styles

Platform-based styles allow you to easily create styles that are specific to a particular platform for specific platforms, such as Web, iOS, or Android

<AppProvider>
  <CodePreview
    showArgsController={false}
    metaData={{
      scope: { styled, Pressable, Provider: StyledProvider, config },
      code: `
          function App () {
          const StyledButton = styled(Pressable, {
            bg: '$primary600',
            px: '$6',
            py: '$4',
            _web: {
              bg: '$amber500',
            },
            _ios: {
              bg: '$blue500',
            },
            _android: {
              bg: '$red500',
            },
          });
          return (
            <Provider config={config}>
              <StyledButton />
            </Provider>
          )
        }
      `,
      argsType: {
        bg: {
          control: 'input',
          default: '$primary600',
        },
      },
    }}
  />
</AppProvider>

```jsx
const StyledButton = styled(Pressable, {
  bg: '$primary600',
  px: '$6',
  py: '$4',
  _web: {
    bg: '$amber500',
  },
  _ios: {
    bg: '$blue500',
  },
  _android: {
    bg: '$red500',
  },
});
```

Although this feature is provided, it is not recommended to use it extensively.

Keep in mind that, while this approach allows for a more customized experience on each platform, this approach can make the codebase more complex and harder to maintain due to the need for additional logic to handle platform-specific props.

Thus, striking a balance between providing a customized experience and maintaining a manageable codebase is crucial.
